<template>
	<div class="container">
		<!-- 头部标签栏 -->
		<div class="top">
			<!-- 左侧标题 -->
			<div class="top-title">Movies Manage</div>
			<!-- /左侧标题 -->
			<!-- 右侧内容 -->
			<div class="top-right">
				<div class="user-info">
					<img src="../../assets/imgs/管理员.png" width="25px" />
					<span style="margin-left: 10px;">{{token}}</span>
				</div>
				<div class="to-home">
					<span><a style="color: #9E9EA0;text-decoration: none" href="" @click.prevent="exit()">退出</a></span>
				</div>
			</div>
			<!-- /右侧内容 -->
		</div>
		<!-- /头部标签栏 -->
		<!-- 管理端主体 -->
		<div class="admin-body">
		<!-- 左侧侧边栏 -->
		<div class="left-menu">
			<el-menu
			  style="height: 245px;"
			  default-active="2"
			  @open="handleOpen"
			  @close="handleClose"
			  background-color="#1A1B20"
			  text-color="#fff"
			  active-text-color="#ffd04b"
			  :default-active="this.$route.path" router
			>
        <el-menu-item index="/user">
          <i class="el-icon-s-custom"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/role">
          <i class="el-icon-user"></i>
          <span slot="title">角色管理</span>
        </el-menu-item>
			  <el-menu-item index="/movie" >
			    <i class="el-icon-video-play"></i>
			    <span slot="title">电影管理</span>
			  </el-menu-item>
			  <el-menu-item index="/comment">
			    <i class="el-icon-s-comment"></i>
			    <span slot="title">反馈管理</span>
			  </el-menu-item>
			  <el-menu-item index="/grade">
			    <i class="el-icon-data-line"></i>
			    <span slot="title">评分管理</span>
			  </el-menu-item>
			  <el-menu-item index="/classify">
			    <i class="el-icon-help"></i>
			    <span slot="title">分类管理</span>
			  </el-menu-item>

			</el-menu>
		</div>
		<!-- /左侧侧边栏 -->
		<!-- 右侧内容 -->
		<div class="right-body">
			<router-view></router-view>
		</div>
		<!-- /右侧内容 -->
		</div>
		<!-- /管理端主体 -->
	</div>
</template>

<script>
export default {
	name: 'admin',
	data () {
		return {
      token: localStorage.getItem('admin'),
			user: {
				username: '管理员名称', // 用户名

			}
		}
	},
	methods: {
		handleOpen(key, keyPath) {
		  console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
		  console.log(key, keyPath);
		},
    exit(){
		  alert("退出成功！")
		  localStorage.removeItem("admin");
		  this.$router.push({name:'Index'})
    }
	}
}
</script>

<style scoped>
.admin-body{
	display: flex;
}
.top {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	height: 65px;
	background-color: #141a25;
}
.top-title {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 250px;
	height: 65px;
	font-size: 25px;
	font-weight: bolder;
	color: #0AACAB;
	background-color: #141a25;
	font-family:"gill sans mt condensed";
}
.top-right{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 350px;
	height: 65px;
}
.user-info{
	display: flex;
	align-items: center;
	width: 150px;
	color: #9E9EA0;
	font-weight: bold;
}
.to-home{
	color: #9E9EA0;
	font-weight: bold;
}
.left-menu{
	width: 200px;
	height: 780px;
	background-color: #1A1B20;
}
.el-menu-item{
	text-align: center;
}
.el-menu{
	border-right:0px;
}
.right-body{
	width: 100%;
	height: 780px;
	background-color: rgba(0,0,0,.09);
}
</style>
